<script setup name="PageHeader" lang="ts">
import { useRouter } from "vue-router";
import { asyncRoutes } from "@/router/index";
import Avatar from './Avatar.vue'
import { useUserStore } from "@/store/user";

const router = useRouter();
const userStore = useUserStore()

/** 跳转 */
const handleJump = (path: string) => {
  router.push(path);
};
</script>

<template>
  <header>
    <div class="header-container">

      <div class="header-left">
        <div class="header-left-dept">
          <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{ userStore.getSelectedDept.deptName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-for="item in userStore.getDeptList" 
                :key="item._id" 
                @click="userStore.setSelectedDeptInfo(item)">
                {{ item.deptName }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        </div>
        <el-divider direction="vertical" />

        <div class="menu-box">
          <div v-for="(item, index) in asyncRoutes" :key="index" :class="$route.name === item.name && 'checked'"
            @click="handleJump(item.path)">
            {{ item.meta.name }}
          </div>
        </div>
      </div>
      <div class="header-right">
        <Avatar />
      </div>
    </div>
  </header>
</template>

<style lang="scss" scoped>
header {
  position: fixed;
  background-color: #ffffff;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  z-index: 999;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}

.header-container {
  margin: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .header-left {
    display: flex;
    align-items: center;

    .header-left-dept {
      margin-right: 15px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .menu-box {
      margin-left: 15px;
      display: flex;
      align-items: center;
      justify-content: left;
      height: 100%;
      div {
        margin-right: 25px;
        cursor: pointer;
        font-size: 14px;

        &:hover {
          color: $main;
        }
      }

      .checked {
        color: $main;
        font-size: 15px;
        font-weight: bold;
      }
    }
  }

  .header-right {
    display: flex;
  }

}
</style>
